<!DOCTYPE html>
<html>
<head>
    <title>Drawing Polygons</title>
    <link href="example.css" rel="stylesheet" type="text/css">
</head>

<body>
<canvas id='canvas' width='850' height='600'>
    Canvas not supported
</canvas>

<div id='controls'>
    Stroke color: <select id='strokeStyleSelect'>
    <option value='red'>red</option>
    <option value='green'>green</option>
    <option value='blue'>blue</option>
    <option value='orange'>orange</option>
    <option value='cornflowerblue' selected>cornflowerblue</option>
    <option value='goldenrod'>goldenrod</option>
    <option value='navy'>navy</option>
    <option value='purple'>purple</option>
</select>

    Fill color: <select id='fillStyleSelect'>
    <option value='rgba(255,0,0,0.5)'>semi-transparent red</option>
    <option value='green'>green</option>
    <option value='rgba(0,0,255,0.5)'>semi-transparent blue</option>
    <option value='orange'>orange</option>
    <option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option>
    <option value='goldenrod' selected>goldenrod</option>
    <option value='navy'>navy</option>
    <option value='purple'>purple</option>
</select>

    Sides: <select id='sidesSelect'>
    <option value=4 select>4</option>
    <option value=6>6</option>
    <option value=8>8</option>
    <option value=10>10</option>
    <option value=12>12</option>
    <option value=20>20</option>
</select>

    Start angle: <select id='startAngleSelect'>
    <option value=0 select>0</option>
    <option value=22.5>22.5</option>
    <option value=45>45</option>
    <option value=67.5>67.5</option>
    <option value=90>90</option>
</select>

    Fill <input id='fillCheckbox' type='checkbox' checked/>
    <input id='eraseAllButton' type='button' value='Erase all'/>
</div>

<script src='example.js'></script>
</body>
</html>
